<template>
    <div id="contactMethod" class="contact" :class="(info.is_bold===1)?'isBold':''">
      <ul class="img">
        <img :src="info.img_src" :width="imgWidth"/>
      </ul>
      <ul class="content" :style="'width:'+(imgWidth*3.5)+'px'">
        <li>{{info.heading}}</li>
        <li>{{info.content}}</li>
        <li>{{info.desc}}</li>
      </ul>
    </div>
</template>

<script>
    export default {
        name: "contactMethod",
      props:{
        info:{},
        imgWidth:Number,
      },
    }
</script>

<style scoped>
  #contactMethod{
    margin:10px;
    background: #FFF;
    border-radius: 2px;
    overflow: hidden;
    padding-top:10px;
    padding-bottom: 10px;
  }
  #contactMethod .img{
    float: left;
    padding:20px;
  }
  #contactMethod .content{
    text-align: left;
    float: left;
    margin-left: 15px;
    vertical-align: middle;
    padding-top:10px;
    padding-bottom: 10px;
  }
  #contactMethod .content li{
    padding:5px;
    font-size:12px;
  }
  #contactMethod .content li:last-child{
    color:#999999;
  }
  #contactMethod .content li:first-child{
    font-size:15px;
  }
  .isBold{
    font-weight: bold;
  }
</style>
